<template>
  <div class="wrap">
    <div class="choise">
      <el-date-picker
        v-model="month"
        type="monthrange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        :picker-options="pickerOptions"
        @change="changeMonth"
        format="yyyy年MM月"
        value-format="yyyy年MM月"
        :clearable="false"
      ></el-date-picker>
    </div>

    <div class="chart-wrap">
      <div id="pie-chart0" class="pie-chart-item"></div>
      <div id="pie-chart1" class="pie-chart-item"></div>
      <div id="pie-chart2" class="pie-chart-item"></div>
      <div id="pie-chart3" class="pie-chart-item"></div>
      <div id="pie-chart4" class="pie-chart-item"></div>
    </div>
  </div>
</template>
<script>
import { DatePicker } from "element-ui";
import { getChart3Data } from "@/api/first-loan.js";
import echarts from "echarts";
export default {
  name: "chart3",
  components: {
    [DatePicker.name]: DatePicker
  },
  props: {
    actived: Boolean,
    chartName: String
  },
  data() {
    return {
      month: "",
      pieChartArr: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            }
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  watch: {
    actived() {
      if (!this.actived) {
        return;
      }
      this.refreshChart();
    }
  },
  mounted() {
    let idNamePre = "pie-chart";
    for (let i = 0; i < 5; i++) {
      this.pieChartArr.push({
        id: idNamePre + i,
        chartInstance: null
      });
    }
  },
  methods: {
    refreshChart() {
      getChart3Data({
        startMonth: this.month[0],
        endMonth: this.month[1]
      })
        .then(res => {
          res.forEach((item, index) => {
            let { id, chartInstance } = this.pieChartArr[index];
            chartInstance = echarts.init(document.getElementById(id));
            chartInstance.resize();
            this.drawChart(chartInstance, item);
          });
        })
        .catch(errMsg => this.$alert(errMsg));
    },
    drawChart(chartInstance, data) {
      let { pieChartDataList } = data;
      let names = [];
      let datas = [];
      pieChartDataList.forEach(item => {
        names.push(item.name);
        datas.push({
          name: item.name,
          value: item.value
        });
      });

      chartInstance.setOption({
        title: {
          text: data.chartType,
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}元 ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: names
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: datas,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    changeMonth() {
      this.refreshChart();
    }
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  .choise {
    padding-bottom: 15px;
    border-bottom: 1px dashed black;
  }

  .chart-wrap {
    margin-top: 15px;

    .pie-chart-item {
      height: 400px;
      width: 600px;
      float: left;
      background-color: #eee;
      margin-bottom: 15px;
      margin-right: 5px;
    }
    #pie-chart2{
        width: 100%;
    }
  }
}
</style>
